<extend name="./public/frame.html"/>
<block name="content">
    <blockquote class="layui-elem-quote search" style="-webkit-margin-end: 0px;">
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-md6 layui-col-lg7">
                <div class="layui-form">
                    <div class="layui-inline">
                        <input type="text" class="layui-input" id="cus_name" placeholder="请输入姓名">
                    </div>
                    <div class="layui-inline">
                        <input type="text" class="layui-input" id="cus_phone" placeholder="请输入手机号">
                    </div>
                    <div class="layui-inline">
                        <select lay-verify="required" id="" class="layui-input">
                            <option value="1">开始时间</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input type="text" class="layui-input date" readonly id="start" placeholder="请选择排班开始时间起"
                               style="width: 180px;">
                    </div>
                    <div class="layui-inline">
                        <input type="text" class="layui-input date" readonly id="end" placeholder="请选择排班开始时间止"
                               style="width: 180px;">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md4 layui-col-lg3">
                <div class="layui-btn-group">
                    <button class="layui-btn" data-type="search">搜索</button>
                    <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
                    <button class="layui-btn layui-btn-warm" data-type="month">本月排班信息</button>
                </div>
            </div>
        </div>
    </blockquote>
    <table class="layui-table" lay-filter="schedule" id="schedule"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    </script>
    <script>
        layui.use(['table', 'laydate', 'form'], function () {
            var table = layui.table, form = layui.form, laydate = layui.laydate;
            lay('.date').each(function () {
                laydate.render({
                    elem: this
                    , type: 'datetime'
                    , trigger: 'click'
                });
            });
            var tableIns = table.render({
                elem: "#schedule",
                url: "{$url}",
                cols: [[
                    {title: "ID", field: 'id', width: 100, sort: true},
                    {title: "客服", field: 'user_name', width: 100},
                    {title: "归属路线", field: 'blong_route_info', width: 200},
                    {title: "手机号", field: 'phone', width: 120},
                    {title: "开始时间", field: 'start_time', width: 180},
                    {title: "结束时间", field: 'end_time', width: 180},
                    {title: "备注说明", field: 'remark', width: 180},
                    {title: "操作", toolbar: '#barDemo', width: 180, align: 'center'}
                ]],
                page: true,
                limit: 10
            });

            //监听工具条
            table.on('tool(schedule)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                var id = data.id;
                if (layEvent === 'edit') {
                    layer.open({
                        type: 2,
                        title: '客服 [' + data.user_name + '] 的排班信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/custom/schedule_edit","id=")}' + id, //iframe的url
                        cancel: function (index, layero) {
                            tableIns.reload("{$url}");
                        }
                    });
                }
                else if (layEvent === 'delete') {
                    var obj = this;
                    layer.confirm('确认删除排班信息么',{icon:3}, function (index) {
                        $.post('/admin/custom/schedule_del', {id: id}, function (res) {
                            switch (res['code']) {
                                case 1:
                                    layer.msg(res['msg'], {icon: 1});
//                                    console.log($(obj).parent().parent().parent());
//                                    $(obj).parent().parent().parent().hide();
                                    break;
                                default:
                                    layer.msg(res['msg'], {icon: 2});
                                    break;
                            }
                        }, 'json');
                        layer.close(index);
                        setTimeout(function (e) {
                            window.location.reload();
                        },1000);
                    });
                }
            });

            var $ = layui.jquery, active = {
                search: function () {
                    var cus_name = $.trim($('#cus_name').val()),
                        cus_phone = $.trim($('#cus_phone').val()),
                        start = $('#start').val(),
                        end = $('#end').val();
                    var reset = $('#reset');
                    if (cus_name || cus_phone || start || end) {
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                        tableIns.reload({
                            url: '/admin/custom/list_',
                            where: {
                                type: 'search',
                                cus_name: cus_name,
                                cus_phone: cus_phone,
                                start: start,
                                end: end
                            } //设定异步数据接口的额外参数
                        });
                    } else {
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        layer.alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        tableIns.reload({
                            url: '{$url}', where: {}
                        });
                    }
                    $('.layui-input').each(function () {
                        $(this).val('');
                    });
                    $('.layui-this').each(function () {
                        $(this).removeClass('layui-this');
                    });
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
                , month: function () {
                    $('#reset').removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                    tableIns.reload({
                        url: '{$url}',
                        where: {type: 'month'}
                    });
                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</block>